<!-- 
        quu..__
         $$$b  `---.__
          "$$b        `--.                          ___.---uuudP
           `$$b           `.__.------.__     __.---'      $$$$"              .
             "$b          -'            `-.-'            $$$"              .'|
               ".                                       d$"             _.'  |
                 `.   /                              ..."             .'     |
                   `./                           ..::-'            _.'       |
                    /                         .:::-'            .-'         .'
                   :                          ::''\          _.'            |
                  .' .-.             .-.           `.      .'               |
                  : /'$$|           .@"$\           `.   .'              _.-'
                 .'|$u$$|          |$$,$$|           |  <            _.-'
                 | `:$$:'          :$$$$$:           `.  `.       .-'
                 :                  `"--'             |    `-.     \
                :##.       ==             .###.       `.      `.    `\
                |##:                      :###:        |        >     >
                |#'     `..'`..'          `###'        x:      /     /
                 \                                   xXX|     /    ./
                  \                                xXXX'|    /   ./
                  /`-.                                  `.  /   /
                 :    `-  ...........,                   | /  .'
                 |         ``:::::::'       .            |<    `.
                 |             ```          |           x| \ `.:``.
                 |                         .'    /'   xXX|  `:`M`M':.
                 |    |                    ;    /:' xXXX'|  -'MMMMM:'
                 `.  .'                   :    /:'       |-'MMMM.-'
                  |  |                   .'   /'        .'MMM.-'
                  `'`'                   :  ,'          |MMM<
                    |                     `'            |tbap\
                     \                                  :MM.-'
                      \                 |              .''
                       \.               `.            /
                        /     .:::::::.. :           /
                       |     .:::::::::::`.         /
                       |   .:::------------\       /
                      /   .''               >::'  /
                      `',:                 :    .'
                                           `:.:'
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Live2D ㄟ( ▔, ▔ )ㄏ</title>
    <link rel="stylesheet" href="./live2d/css/live2d.css" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <style type="text/css">
    	#landlord{margin:20px auto;}
    	.live2d{margin:0px auto;display: block;}
    	.btn {color: #fff;outline: none;border:none;background-color:#1abc9c;display: inline-block;width: 68px ;height: 36px;line-height: 36px;border-radius: 3px;text-align: center;transition: all .2s;cursor: pointer;}
    	.btn:hover{transition: all .2s;background-color: #2fe2bf}
    	.btn-container{text-align: center;}
    </style>
</head>
<body>
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d-1" width="280" height="500" class="live2d"></canvas>
</div>
<div class = "btn-container">
	<button class="pre btn" disabled="disabled">上一个</button>
    <button class="next btn">下一个</button>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="./live2d/js/live2d.js"></script>
<script type="text/javascript">
    console.log("%c 提示 %c","background:#1abc9c; color:#fff","","仅供浏览参考,请勿用于其他用途");
    console.log("%c 源自 %c","background:#1abc9c; color:#fff","","https://github.com/xiazeyu/live2d-widget-models");
    var $index = 0;
    var arr = [
    	"./live2d/model/tia/model.json",
    	"./model-package/live2d-widget-model-chitose/assets/chitose.model.json",
    	"./model-package/live2d-widget-model-haru/01/assets/haru01.model.json",
    	"./model-package/live2d-widget-model-haru/02/assets/haru02.model.json",
    	"./model-package/live2d-widget-model-haruto/assets/haruto.model.json",
    	"./model-package/live2d-widget-model-hibiki/assets/hibiki.model.json",
    	"./model-package/live2d-widget-model-hijiki/assets/hijiki.model.json",
    	"./model-package/live2d-widget-model-izumi/assets/izumi.model.json",
    	"./model-package/live2d-widget-model-koharu/assets/koharu.model.json",
    	"./model-package/live2d-widget-model-miku/assets/miku.model.json",
    	"./model-package/live2d-widget-model-ni-j/assets/ni-j.model.json",
    	"./model-package/live2d-widget-model-nico/assets/nico.model.json",
    	"./model-package/live2d-widget-model-nietzsche/assets/nietzche.model.json",
    	"./model-package/live2d-widget-model-nipsilon/assets/nipsilon.model.json",
    	"./model-package/live2d-widget-model-nito/assets/nito.model.json",
    	"./model-package/live2d-widget-model-shizuku/assets/shizuku.model.json"
    ]
    loadlive2d("live2d-1", arr[0]);
    $(".pre").click(function(){
    	$index -= 1;
    	loadlive2d("live2d-1", arr[$index]);
    	judgeIndex()
    })
	$(".next").click(function(){
		$index += 1;
    	loadlive2d("live2d-1", arr[$index]);
    	judgeIndex()
    })
	function judgeIndex(){
		if($index == 0){
	    	$(".pre").attr("disabled","true")
	    }else{
	    	$(".pre").removeAttr("disabled")
	    }
	    if($index == (arr.length-1)){
	    	$(".next").attr("disabled","true")
	    }else{
	    	$(".next").removeAttr("disabled")
	    }
	}
</script>
</body>
</html>